<script setup>
import { onMounted, ref } from 'vue';
import { kimiGpt, generateModule } from '@/service/chatGpt';
import { useRoute } from 'vue-router';

defineProps({
  msg: {
    type: String,
    required: true
  }
})

const count = ref(0);
const content = ref('');
const directory = ref('');
const gptResponse = ref('');
const loading = ref(false);
const moduleLoading = ref(false);

onMounted(() => {
  const generateEntityContent = localStorage.getItem('GenerateEntityContent');

  if (generateEntityContent) {
    content.value = generateEntityContent;
    handleClick();
    localStorage.removeItem('GenerateEntityContent');
  }
});

const handleClick = async () => {
  try {
    loading.value = true;
    const res = await kimiGpt({ message: content.value });
    console.log('res: ', res);
    gptResponse.value = res;
  } catch (error) {
    console.error('Generate failed:', error);
  } finally {
    loading.value = false;
  }
};

const handleGenerateModule = async () => {
  try {
    moduleLoading.value = true;
    const res = await generateModule({ message: content.value });
    console.log('res: ', res);
  } catch (error) {
    console.error('Generate module failed:', error);
  } finally {
    moduleLoading.value = false;
  }
};

</script>

<template>
  <div class="greetings">
    <h3>
      <a-textarea 
        v-model:value="content" 
        placeholder="Basic usage" 
        :rows="10" 
        class="gpt-input"
        :disabled="loading || moduleLoading"
      />
      <div class="inner-wrapper">
        <a-button 
          @click="handleClick" 
          class="btn-generate"
          :loading="loading"
          :disabled="!content || moduleLoading"
        >
          {{ loading ? 'Generating...' : 'Generate' }}
        </a-button>
      </div>
      <a-textarea 
        v-model:value="gptResponse" 
        placeholder="" 
        :rows="16"  
        class="gpt-output"
        :disabled="loading || moduleLoading"
      />
      <a-input 
        v-model:value="directory"
        :disabled="loading || moduleLoading"
      />
      <div class="inner-wrapper">
        <a-button 
          @click="handleGenerateModule" 
          class="btn-generate"
          :loading="moduleLoading"
          :disabled="!content || loading"
        >
          {{ moduleLoading ? 'Generating module...' : 'Generate module' }}
        </a-button>
      </div>
    </h3>
  </div>
</template>

<style scoped>
h1 {
  font-weight: 500;
  font-size: 2.6rem;
  position: relative;
  top: -10px;
}

h3 {
  font-size: 1.2rem;
}

.greetings {
  text-align: center;
  width: 100%;
}

@media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
}

.btn-generate {
  margin-top: 10px;
}

.gpt-input, .gpt-output {
  margin-top: 10px;
  width: 100%;
}

.inner-wrapper {
  display: flex;
  justify-content: center;
}
</style>

